<template>
  <div class="wapper">
    <div @click="show = true" class="value">{{ valueMirror || "请输入" }}</div>

    <van-popup
      v-model="show"
      safe-area-inset-bottom
      close-on-popstate
      position="bottom"
      get-container="body"
    >
      <div class="search-wapper">
        <van-search
          v-model="valueMirror"
          placeholder="请输入关键词"
          @input="debouncedInput"
        />

        <van-loading v-if="loading">加载中，请稍候...</van-loading>

        <van-cell v-else-if="searchList.length < 1">暂无匹配项</van-cell>

        <van-cell-group v-else>
          <van-cell
            v-for="item in searchList"
            :key="item"
            :title="item"
            @click="handleCellClick(item)"
          />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Loading, Popup, Search, Cell, CellGroup } from "vant";
import { debounce } from "lodash";
import { to } from "@/utils";
import { GetQuoteBatchIdsThree } from "@/api/check";

export default {
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Search.name]: Search,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  model: {
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      required: true,
    },
    materialCode: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      searchList: [],
      token: "",
      materialCode1: "",
    };
  },
  computed: {
    valueMirror: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit("change", val);
      },
    },
  },
  watch: {
    materialCode(val) {
      if (val) {
        this.materialCode1 = val;
        this.valueMirror = "";
        this.fetchSearchList(this.valueMirror);
      }
    },
  },
  methods: {
    handleSearchInput(val) {
      this.fetchSearchList(val);
    },
    handleCellClick(val) {
      this.valueMirror = val;
      this.fetchSearchList(val);
      this.show = false;
    },
    async fetchSearchList(val) {
      const queryParams = {
        Token: this.token,
        search: val,
        order: "desc",
        origin: "02",
        materialCode: this.materialCode1,
      };
      this.loading = true;
      const [err, res] = await to(GetQuoteBatchIdsThree(queryParams));
      this.loading = false;
      if (err) return [];
      var result = res.Result.batchs;
      this.searchList = result;
    },
  },
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.debouncedInput = debounce(this.handleSearchInput, 1000, {
      leading: false,
      trailing: true,
    }); //防抖
  },
};
</script>

<style lang="less" scoped>
.wapper,
.value {
  width: 100%;
  height: 100%;
  text-align: center;
}

.search-wapper {
  height: 50vh;
  display: flex;
  flex-direction: column;

  & > div:last-of-type {
    height: 0;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
</style>